import * as THREE from 'three'

export const Shader = {
  uniforms: {
  },
  vertexShader: `
    // uniform mat4 modelViewMatrix;
    // uniform mat4 projectionMatrix;

    // attribute vec3 position;

    // varying vec3 vPosition;

    void main() {
      vPosition = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    precision mediump float;
    precision mediump int;

    uniform float ratio;

    varying vec3 vPosition;

    void main() {
      vec3 center = vec3(0.0, 0.0, 0.0);

      // float opaX = 1.0;
      float opaX = 1.0 - abs(vPosition[0]) / 200.0;
      opaX = clamp(opaX, 0.0, 1.0);

      // float opaY = 1.0;
      float opaY = 1.0 - abs(vPosition[1]) / 5.0;
      opaY = clamp(opaY, 0.0, 1.0);

      gl_FragColor =  vec4(1.0, 0.5, 0.5, opaX * opaY);
    }
  `,
}

export const Material = new THREE.RawShaderMaterial({
  ...Shader,
  uniforms: {
    ratio: {
      value: 0.0
    }
  },
})

export function startAnimate({scene, renderer, camera}, material = Material) {
  let ratio = 0
  const animate = () => {
    material.uniforms.ratio.value = ratio
    renderer.render(scene, camera)
    ratio = (ratio + 0.02) % 1
    requestAnimationFrame(animate)
  }
  animate()
}
